<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="库位名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入库位名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="所属仓库" prop="warehouseId">
        <el-select
          v-model="queryParams.warehouseId"
          class="!w-240px"
          placeholder="请选择仓库"
           @keyup.enter="handleQuery"
           @change="getChange(queryParams.warehouseId)"
          style="width: 160px"
          clearable
        >
          <el-option
            v-for="item in warehouseDate"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> -->
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
       
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
     <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <div style="text-align: left">
          <el-button
          type="primary"
          plain
          @click="btnAdd"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
       
        </div>
      </el-col>
    </el-row>
    <el-table  :data="dataList" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="库位名称" align="center" prop="name" />
      <!-- <el-table-column label="仓库" align="center" prop="warehouseId" />
      <el-table-column label="仓库区域" align="center" prop="areaId" /> -->
      <!-- <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      /> -->
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="备注" align="center" prop="remark"  />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="btnDetail(scope.row)">
          删除
        </el-button>
      </template>

    </el-table-column>
      
      
    </el-table>
    <!-- 分页 -->
     <!-- 分页 -->
     <div class="footer-area">
        <el-pagination
      v-model:pageNo="queryParams.pageNo"
      v-model:pageSize="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
  </ContentWrap>

  <!-- 自定义字段 -->
  <el-dialog v-model="dialogVisible" title="自定义字段" width="50%" :before-close="handleClose">
    <div class="content">
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.image" label="图片" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.bianhao" label="产品编号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.name" label="产品名称" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.count" label="产品分类" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.feilei" label="产品规格" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.shuxing" label="产品属性" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu" label="产品备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.zhuangtai" label="产品使用状态" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei" label="单位(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu2" label="入库备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei2" label="销售单价(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei3" label="成本单价(基本单位)" size="large"
      /></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  
   <!-- 新增弹框 -->
   <docking v-model="dockShow" @confirm="btnconfirm" :ids="ids" />

</template>

<script setup lang="ts">
 import docking from './components/add.vue'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { WarehouseLocationApi, WarehouseLocationVO } from '@/api/erp/foundation/warehouseAreas'
import WarehouseLocationForm from './WarehouseLocationForm.vue'
import {warehouseApi} from '@/api/erp/foundation/warehouse'

/** 仓库区域库位 列表 */
// defineOptions({ name: 'WarehouseLocation' })
const warehouseDate=ref([])

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<WarehouseLocationVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const isExpanded = ref(false)
// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
const visibleColumns = ref({
  image: true,
  bianhao: true,
  name: true,
  count: true,
  feilei: true,
  shuxing: true,
  beizhu: true,
  zhuangtai: true,
  danwei: true,
  beizhu2: true,
  danwei2: true,
  danwei3: true
})
const dialogVisible = ref(false)
const tempVisibleColumns = ref({ ...visibleColumns.value })
const searchConfig = ref([
  {
    prop: 'shipmentNumber',
    placeholder: '请输入入库编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialKey',
    placeholder: '请选择单据类型',
    type: 'select',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入规格',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入型号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入关联单号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入建议供应商',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入仓库',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入销售订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入客户订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '制单开始日期',
    endPlaceholder: '制单结束日期',
    showInCollapsed: false
  }
])
const dataList=ref([])
const name=ref("")
const dockShow=ref(false)
const options=ref([])
const pageNo=ref(1)
const pageSize=ref(10)
const warehouseId=ref("")
const ids=ref("")
/** 初始化 **/
onMounted(async () => {
  getpageListss()
})
//新增刷新列表
function btnconfirm(){
  getpageList()
}
function getChange(e){
  warehouseId.value=e
  getpageList()
}
//获取仓库数据
function getpageListss(){
 
  warehouseApi.pageList().then((res)=>{
    console.log('仓库数据',res)
    warehouseDate.value=res.list
  })
}

//删除
function btnDetail(e){
  console.log('这是什么',e.id)
  ids.value=e.id
  ElMessageBox.confirm(
    '确实是否删除该数据',
    
    {
      confirmButtonText: 'OK',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
   
      WarehouseLocationApi.delete(ids.value).then((res)=>{
        console.log('这是啥',res)
        if(res == true){
          getpageList()
          ElMessage({
        type: 'success',
        message: '操作成功',
      })
        }
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
//分页
function  handleSizeChange(e){
  pageSize.value=e
  getpageList()
}
function handleCurrentChange(e){
  pageNo.value=e
  getpageList()
}
//列表接口
function getpageList(){
  let parm={
    name:name.value,
    pageNo:pageNo.value,
    pageSize:pageSize.value,
    warehouseId:warehouseId.value
  }
  WarehouseLocationApi.pageList(parm).then((res)=>{
    console.log('列表的数据',res)
      dataList.value=res.list
      total.value=res.total
      for(let item of dataList.value){
        if(item.status == 1){
           item.status='关闭'
        }else{
          item.status='开启'
        }
      }
  })
}
//打开新增弹框
function btnAdd(){
    ids.value=''
  dockShow.value=true
}
//编辑
function handleClick(e){
  ids.value=e.id
  dockShow.value=true
}

const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}

// 根据展开状态过滤显示的搜索项
const visibleSearchConfig = computed(() => {
  return searchConfig.value.filter((item) => isExpanded.value || item.showInCollapsed)
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  warehouseId: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const queryWHParams = reactive({
  pageNo: 1,
  pageSize: 10,
 
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
 warehouseDate.value= (await warehouseApi.pageList(queryWHParams)).list
  try {
    const data = await WarehouseLocationApi.getWarehouseLocationPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
 
}



/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
// const formRef = ref()
// const openForm = (type: string, id?: number) => {
//   formRef.value.open(type, id)
// }


</script>
<style scoped>
.footer-area{
  display: flex;
    padding-bottom: 14px;
    margin-top: 26px;
    justify-content: end;
  
}

:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}



</style>